<template>
    <div class="body">
        <div class="title-content">
            <p class="title">登录</p>
            <p class="sub-title">登录用户才能进行下单及各项软件操作</p>
        </div>
        <div>
            <input class="input-content" v-model="form.phone" type="text" placeholder="手机号码"/>
            <input class="input-content" v-model="form.pwd" type="password" placeholder="登录密码"/>
        </div>
        <div class="login-options">
            <router-link to="/">忘记密码?</router-link>
        </div>
        <van-button round color="#3DCEB9" size="large" @click="login">登录</van-button>
        <div class="to-register">
            <p>还没有账号?</p>
            <router-link to="/register">点此注册</router-link>
        </div>
    </div>
</template>
<script>
import {login} from '../ajax'
import { Notify,Dialog } from 'vant';
export default {
    data() {
        return {
            form:{
                phone:'',
                vcode:'',
                pwd:'',
                type:1
            }
        }
    },
    methods:{
        login(){
            const {form} = this;
            if(!(/^1[3456789]\d{9}$/.test(form.phone))){
                Notify({ type: 'danger', message: '手机号码格式有误,请输入正确的手机号码' });
                return false; 
            }else if(!(/^[0-9a-zA-Z]{3,12}$/.test(form.pwd))){
                Notify({ type: 'danger', message: '密码格式有误,请输入正确的密码' });
                return false; 
            }
            form.admin_id=this.$store.getters.admin_id
            login(form).then(res=>{
                console.log(res);
                // if(res.is_adopt == 1){
                //     Dialog({ message: '该用户暂未审核' });
                // }
                this.$store.commit('wxUserInfo',res);
                this.$router.push('/');
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#fff;
    .body{
        width: 80%;
        height: calc(100vh - 4rem);
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: $white;
        .title-content{
            .title{
                font-size: 2rem;
                line-height: 3rem;
            }
            .sub-title{
                font-size: 0.8rem;
            }
        }
        .login-options{
            display: flex;
            justify-content: flex-end;
            a{
                line-height: 2rem;
                color: $green;
                text-decoration: underline;
            }
        }
        .to-register{
            text-align: center;
            p{
                font-size: 0.9rem;
            }
            a{
                text-decoration: underline;
                color: $green;
            }
        }
    }
</style>